import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
import Loadable from 'react-loadable';
import 'rc-tabs/assets/index.css';
import { isEqual, isEmpty } from 'lodash';
import './Tabstyle_35.css';

export class Tabstyle_35 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            tabid: props.datas.currentTab
        }
        this.handleTabData = this.handleTabData.bind(this);
    }

    handleTabData(tabid){
        const { datas={} } = this.props;
        const { handleTabData={} } = datas;
        handleTabData(tabid);
        this.setState({
            tabid: tabid
        })
    }

    componentWillReceiveProps(nextProps){
        const { tabid } = this.state;
        if(!isEqual(tabid, nextProps.datas.currentTab)){
            this.setState({
                tabid: nextProps.datas.currentTab
            })
        }
    }

    render(){

        const { datas={}, fontStyle, ebaseid = '' } = this.props;
        const { tabid } = this.state;
        const { currentTab, tabids = [], titles = [],
            methodvalue,tabwidth,counts, config={}, isShowSettingShowType='0',tabstyle, tabvalue} = datas;
        const { item={} } = config;
        const { header={} } = item;
        if(isEmpty(datas)) return <div/>;
        const tdStyle={width: 'auto', verticalAlign: 'top',backgroundSize: '100% 100%', height: '44px', lineHeight: '44px', paddingTop: '0px'};
        const tdStyle1={width: 'auto',  verticalAlign: 'top',backgroundSize: '100% 100%', height: '44px', lineHeight: '44px', paddingTop: '0px'};
        let style = {marginLeft: '15px', marginRight: '15px',height:'42px'};
        let style1 = {width: tabwidth + 'px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', display: 'block',padding:'0px 15px',height:'42px'};
        let titleStyle = {width: '100%'};

        let tHtml_new = (
            <div className="commonTab style_35_Tab">
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@4xa6rf`}
                    activeKey={tabid}
                    renderTabBar={()=><ScrollableInkTabBar ecId={`${this && this.props && this.props.ecId || ''}_ScrollableInkTabBar@b5s144`} />}
                    renderTabContent={()=><TabContent ecId={`${this && this.props && this.props.ecId || ''}_TabContent@wd29uw`} />}
                    className="tabcontainer tab2"
                    style={titleStyle}
                >
                    {
                        titles.map((title, i)=> {
                            if ((ebaseid == '8') && counts && counts[i] !== -1 && counts[i] !== '' && counts[i] !== null) {
                                if(counts[i] > 99){
                                    title +='(99+)';
                                }else {
                                    title +=' (' + counts[i] + ')';
                                }
                            }else if (ebaseid == 'blogStatus' &&
                                counts && '0'!== counts[i]) {
                                title += ' (' + counts[i] + ')';

                            }else if(ebaseid == '7_DY'&& counts && '0'!== counts[i]){
                                title += ' (' + counts[i].noReadNum + ')';
                            }else if(isShowSettingShowType == '1' && ebaseid == '7'&& counts && counts[i] && counts[i].noReadNum){
                                title += ' (' + counts[i].noReadNum + ')';
                            }else if(ebaseid == '7'&& counts && counts[i] && counts[i].isHaveNoRead && counts[i].isHaveNoRead == '1'){
                                title =  title;
                            }
                            const className = tabids[i] == tabid ? `tab2selected wea-f${fontStyle.tab1fontsize || 12}` : `tab2unselected wea-f${fontStyle.tab2fontsize || 12}`;
                            const pointClassName = ebaseid == '7'&& counts && counts[i] && counts[i].isHaveNoRead && counts[i].isHaveNoRead == '1' ? 'portal-new-unreadpoint' : '';
                            let tabTextStyle=pointClassName==''?{display:'inline-block',width:'100%',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}:{display:'inline-block',width:'calc(100% - 10px)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}
                        return <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@ukpdha@${tabids[i]}`} key={tabids[i]} style={{width: '200px'}}
                                            tab={<div
                                                title={title}
                                                className={className}
                                                style={methodvalue == '2' ? tdStyle1 : tdStyle} data-tabid={tabids[i]}
                                                onClick={() => this.handleTabData(tabids[i])}
                                            >   <div  className={`style_35_Tabtitle`}>
                                                    <div className={`tabcolor-${i} tabcolor`} style={titles.length == i+1 ? {borderBottomRightRadius: '20px',borderTopRightRadius:'20px'} : {}}>
                                                        <div style={methodvalue==2 ?  style : style1}>
                                                            <div style={tabTextStyle}>{title}</div>
                                                            <div className={pointClassName} style={{position:'relative',top:'-17px'}}></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>}>
                            </TabPane>
                        })
                    }
                </Tabs>
            </div>
        )
        return tHtml_new;
    }
}

export default Tabstyle_35;